<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米商业信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>

        #page-wrapper
        {
            margin: 0 0 0 0px;
        }
        h1
        {
            font-size: 60px;
        }
    </style>
</head>

<body>

<div id="wrapper">

    <!-- 头部导航 -->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>物流支出明细</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a>财务管理</a>
                    </li>
                    <li>
                        <a href="pay.html">支出管理</a>
                    </li>
                    <li class="active">
                        <strong>物流支出明细</strong>
                    </li>
                </ol>
            </div>
        </div>
        <!-- 头部导航结束 -->

        <!-- 头部明细 -->
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">27号</span>
                    <h5>今日支出（元）</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">￥1,800</h1>
                    <div class="stat-percent font-bold text-info">5% <i class="fa fa-level-up"></i></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">5月</span>
                    <h5>本月已支出（元）</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">￥8,800</h1>
                    <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>历史支出（三个月内）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <td>月份</td>
                            <td>金额（元）</td>
                            <td>经手人</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>三月</td>
                            <td>￥5000.00</td>
                            <td>admin</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 头部明细结束 -->

        <div class="row">
            <div class="col-lg-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1">图形</a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2"> 列表</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- 图形展示 -->
                        <div id="tab-1" class="tab-pane active">
                            <div class="col-lg-6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>支出占比</h5>
                                        <div ibox-tools></div>
                                    </div>
                                    <div class="ibox-content">
                                        <div>
                                            <canvas id="doughnutChart" height="140"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 列表展示 -->
                        <div id="tab-2" class="tab-pane ">
                            <div class="panel-body">
                                <!-- 支出额列表 -->
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title">
                                                <h5>支出单 </h5>
                                                <div class="ibox-tools">
                                                    <a class="collapse-link">
                                                        <i class="fa fa-chevron-up"></i>
                                                    </a>
                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                        <i class="fa fa-wrench"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-user">
                                                        <li><a href="#">Config option 1</a>
                                                        </li>
                                                        <li><a href="#">Config option 2</a>
                                                        </li>
                                                    </ul>
                                                    <a class="close-link">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="ibox-content">
                                                <div class="row">
                                                    <div class="col-sm-2 m-b-xs">
                                                        <!--<select class="input-sm form-control input-s-sm inline">
                                                            <option value="0">1号仓库</option>
                                                            <option value="1">2号仓库</option>
                                                            <option value="2">3号仓库</option>
                                                            <option value="3">4号仓库</option>
                                                        </select>-->
                                                    </div>
                                                    <div class="col-sm-4 m-b-xs">
                                                        <div data-toggle="buttons" class="btn-group">
                                                            <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> 日 </label>
                                                            <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> 周 </label>
                                                            <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> 月 </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2 m-b-xs">
                                                        <div class="form-group" id="data_1">

                                                            <div class="input-group date">
                                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2017">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2 m-b-xs">
                                                        <div class="form-group" id="data_1">

                                                            <div class="input-group date">
                                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2017">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2">
                                                        <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span></div>
                                                    </div>
                                                </div>
                                                <div class="table-responsive">
                                                    <table class="table table-striped">
                                                        <thead>
                                                        <tr>
                                                            <th></th>
                                                            <th>单据编号 </th>
                                                            <th>单据日期</th>
                                                            <th>经手人</th>
                                                            <th>支出金额（元） </th>
                                                            <th>状态</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>Project<small>This is example of project</small></td>
                                                            <td><span class="pie">0.52/1.561</span></td>
                                                            <td>20%</td>
                                                            <td>Jul 14, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>2</td>
                                                            <td>Alpha project</td>
                                                            <td><span class="pie">6,9</span></td>
                                                            <td>40%</td>
                                                            <td>Jul 16, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>3</td>
                                                            <td>Betha project</td>
                                                            <td><span class="pie">3,1</span></td>
                                                            <td>75%</td>
                                                            <td>Jul 18, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>4</td>
                                                            <td>Gamma project</td>
                                                            <td><span class="pie">4,9</span></td>
                                                            <td>18%</td>
                                                            <td>Jul 22, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td>总计：50000</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>



<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Peity -->
<script src="../js/plugins/peity/jquery.peity.min.js"></script>
<script src="../js/plugins/chartJs/Chart.min.js"></script>
<!--<script src="../js/demo/chartjs-demo.js"></script>-->

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>
<script src="../js/plugins/pace/pace.min.js"></script>

<!-- iCheck -->
<script src="../js/plugins/iCheck/icheck.min.js"></script>


<!-- 日期插件 -->
<script src="../js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
    var doughnutData = [
        {
            value: 300,
            color: "#a3e1d4",
            highlight: "#1ab394",
            label: "App"
        },
        {
            value: 50,
            color: "#dedede",
            highlight: "#1ab394",
            label: "Software"
        },
        {
            value: 100,
            color: "#b5b8cf",
            highlight: "#1ab394",
            label: "Laptop"
        }
    ];

    var doughnutOptions = {
        segmentShowStroke: true,
        segmentStrokeColor: "#fff",
        segmentStrokeWidth: 2,
        percentageInnerCutout: 45, // This is 0 for Pie charts
        animationSteps: 100,
        animationEasing: "easeOutBounce",
        animateRotate: true,
        animateScale: false,
        responsive: true,
    };

    var ctx = document.getElementById("doughnutChart").getContext("2d");
    var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);

    //开始日期
    $('#startDate .input-group.date').datepicker({
        language: "cn",
        todayBtn: "linked",
        todayHighlight: true,
        keyboardNavigation: false,
        format: "yyyy-MM-dd",
        pickerPosition: "bottom-right",
        autoclose: true
    });
    //结束日期
    $('#endDate .input-group.date').datepicker({
        language: "cn",
        todayBtn: "linked",
        todayHighlight: true,
        keyboardNavigation: false,
        format: "yyyy-MM-dd",
        pickerPosition: "bottom-right",
        autoclose: true
    });
</script>

</body>

</html>